<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <rz-height />
    <rz-height />
    <rz-height />
    <div style="font-size:18px;padding-left:10px">{{time}}</div>
    <rz-height />
    <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
           <rz-height></rz-height>
        <div class="list">
      

          <div class="item" :style="personnel" @click="index='1';show=true">
            <div style="color:#2CA6EE">主体总数</div>
            <rz-height :height="5"/>
            <div style="font-size:20px">{{data1.unitCount}}</div>
          </div >
          <div class="item" :style="personnel" @click="index='2';show=true">
            <div style="color:#2CA6EE">检查次数</div> <rz-height :height="5"/>
            <div style="font-size:20px">{{data1.inspectionCount}}</div>
          </div>
          <div class="item" :style="personnel"  @click="index='3';show=true">
            <div style="color:#2CA6EE">问题发现</div> <rz-height :height="5"/>
            <div style="font-size:20px">{{data1.problemFindingCount}}</div>
          </div>
           <div class="item" :style="personnel"  @click="index='3';show=true">
            <div style="color:#2CA6EE">整改复查</div> <rz-height :height="5"/>
            <div style="font-size:20px">{{data1.rectifiedCount}}</div>
          </div>
        </div>
        <rz-height></rz-height>
        <rz-height></rz-height>
        <rz-height></rz-height>
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="title " :style="note">单位业态(单位数)</div>
             <rz-height></rz-height>
            <dv-capsule-chart
            v-if="!loading"
              :config="config"
              style="width: 100%; height:180px"
            />
          </el-col>
          <el-col :span="12"
            ><div class="title " :style="note">检查结果分析</div>
            <div id="main1" style="width: 100%; height: 180px"></div>
          </el-col>
        </el-row>
      </div>
      <div :style="note1" @click="()=>{$emit('handle','dialogs')}">日常监督</div>
    </dv-border-box-1>
    <rz-height />
    <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
        <div class="list">
          <div class="item number" @click="index='4';show=true">
            <div style="color:#CFF71F;font-size:25px">{{ data.unitCount }}</div>
            <div>单位总数</div>
          </div>
          <div class="item number"  @click="index='5';show=true">
            <div  style="color:#E4AE28;font-size:25px" >{{ data.headCount }}</div>
            <div>负责人</div>
          </div>
          <div class="item number" @click="index='6';show=true">
            <div  style="color:#1CF93C;font-size:25px">{{ data.secureCount }}</div>
            <div>安全总监</div>
          </div>
          <div class="item number" @click="index='7';show=true">
            <div  style="color:#FE738B;font-size:25px">{{ data.safetyDirectorCount }}</div>
            <div>安全员</div>
          </div>
          <!-- <div class="item number"  @click="index='8';show=true">
            <div  style="color:#E4AE28;font-size:20px">{{ data.practitionerCount }}</div>
            <div>从业人员</div>
          </div> -->
        </div>
        <rz-height></rz-height>
        <rz-height></rz-height>

        <el-row :gutter="20">
          <el-col :span="9">
            <div class="title " :style="note">三件事落实情况</div>
            <rz-height />
            <rz-height />
            <div class="totle" @click="index='9';show=true">
              <img
                style="width: 60px; height: 60px; margin-right: 10px"
                src="@/assets/images/item1.png"
              />
              <div>
                <div style="color:#00E0FB;font-size:20px">
                  <span>{{ data.dailyBatchCount }}/</span>
                  <span style="color:#1CF93C;font-size:14px">{{ data.dayPercentage }}</span>
                </div>
                 <rz-height :height="5"/>
                <div style="font-size:14px ">日管控</div>
              </div>
            </div>
            <rz-height />
            <rz-height />
            <div class="totle" @click="index='10';show=true">
              <img
                style="width: 60px; height: 60px; margin-right: 10px"
                src="@/assets/images/item1.png"
              />
              <div>
                <div style="color:#00E0FB;font-size:20px">
                  
                     <span>{{ data.weeklyBatchCount }}/</span>
                  <span style="color:#1CF93C;font-size:14px">{{ data.weeklyPercentage }}</span>
                </div>
                <rz-height :height="5"/>
                <div style="font-size:14px">周排查</div>
              </div>
            </div>
            <rz-height />
            <rz-height />
            <div class="totle" @click="index='11';show=true">
              <img
                style="width: 60px; height: 60px; margin-right: 10px"
                src="@/assets/images/item1.png"
              />
              <div>
                <div style="color:#00E0FB;font-size:20px">
                        <span>{{ data.monthlyBatchCount }}/</span>
                  <span style="color:#1CF93C;font-size:14px">{{ data.monthPercentage }}</span>
                </div>
                 <rz-height :height="5"/>
                <div style="font-size:14px">月调度</div>
              </div>
            </div>
          </el-col>
          <el-col :span="15"
            ><div class="title " :style="note">信用指数</div>
            <div id="main2" style="width: 100%; height: 225px"></div>
          </el-col>
        </el-row>
      </div>
      <div :style="note1" @click="()=>{$emit('handle','dialog1')}">主体责任</div>
    </dv-border-box-1>
    <!-- <dialogs :index="index" :show="show"  @beforeClose="show=false"/> -->
  </div>
</template>
<script>
import { findPrincipalResponsibility,findDailySupervisionStatistics } from "@/api/modules/home";
// import dialogs from "@/views/home/home/components/dialog"
var echarts = require("echarts");
export default {
  props: {
    code: {
      type: String,
      default: "320500",
    },
  },
  // props:[],
  // 页面加载
  created() {
    // if (this.code) {
    //   this.districtcode = this.code;
    // }
    setInterval(()=>{
      this.time=this.$moment().format("YYYY-MM-DD HH:mm:ss")
    })
  },
  // 页面加载完成
  mounted() {
    this.getList();
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      time:null,
      index:'',
      show:false,
      config: {
        data: [],
        showValue: true,
      },
      data: {},
      note: {
        backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        padding: "5px 10px",
        color:"#FFF"
      },
      personnel: {
        backgroundImage: "url(" + require("@/assets/images/format.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      note1: {
         backgroundImage: "url(" + require("@/assets/images/dai_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
  left: "50%",
  width:'50%',
  textAlign: "center",
  top: "0",
  transform: "translate(-50%,-50%)",
  color:"white",
  fontSize:'14px',
  height:'45px',
  lineHeight: '44px',
   cursor: 'pointer'
      },
      myChartleft: "",
      myChartleftColumn: "",
      list: [],
      indexList: [],
      isSpecialFood: {},
      loading: true,
      data1:{},
    };
  },
  // 方法
  methods: {
    
    async getList() {
      let { data } = await findPrincipalResponsibility();
      this.data = data;
      this.pieChart();
    this.getList1()

    },
 async getList1() {
      let { data } = await findDailySupervisionStatistics();
      // this.data = data;
      // this.pieChart();
       this.config.data = data.unitFormatResponseList.map((x) => {
        return {
          name: x.bodyIndustry,
          value: x.bodyIndustryCount,
        };
      });
      this.data1=data
       let option = {
        // legend: {
        //   top: 10,
        //   textStyle: {
        //     color: "white",
        //   },
        // },
        color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
           
textStyle:{
           color:"#00E0FB",

},
          // formatter: "{b} : {c}家，占比 ({d}%)",
           formatter: function (e) {
                return `${e.data.name.substring(0,15)+'<br/>'+e.data.name.substring(15)}${e.data.value}家次(${e.data.Proportion})`;
              },
           backgroundColor:"rgba(4,39,121,0.9)",
           position: ['50%', '50%']
        },

        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ['30%','50%'],
            center: ['50%', '60%'],
            data:data.inspectionResultsResponseList.map(x=>{
              return  {
                   value:x.inspectionCount,
                Proportion: x.inspectionRate,
                name: x.categoryName.replace('此次检查发现不符合监督检査要点表一般项目，',''),
              }
            }),
            hoverAnimation: false,
            label: {
              color: "#fff",
              show: true,
              formatter: function (e) {
                return `${e.data.Proportion}`;
              },
            },
          },
        ],
      };
      echarts.init(document.getElementById("main1"), "dark").setOption(option);
      this.loading=false
    },



    pieChart() {
      let option = {
        legend: {
          top: 10,
          data: ["90-100", "80-89", "70-79", "60-69", "0-59"],
          textStyle: {
            color: "white",
          },
        },
        color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
        backgroundColor: "transparent",
        tooltip: {
          textStyle:{
           color:"#00E0FB",

},
          trigger: "item",
          formatter: "{b} : {c}家，占比 ({d}%)",
           backgroundColor:"rgba(4,39,121,0.9)",
        },

        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ['30%','50%'],
            center: ['50%', '60%'],
            data: [
              {
                value: this.data.fractionOne,
                Proportion: this.data.percentageOne,
                name: "90-100",
              },
              {
                value: this.data.fractionTwo,
                Proportion: this.data.percentageTwo,
                name: "80-89",
              },
              {
                value: this.data.fractionThree,
                Proportion: this.data.percentageThree,
                name: "70-79",
              },
              {
                value: this.data.fractionFour,
                Proportion: this.data.percentageFour,
                name: "60-69",
              },
              {
                value: this.data.fractionFive,
                Proportion: this.data.percentageFive,
                name: "0-59",
              },
            ],
            hoverAnimation: false,
            label: {
              color: "#fff",
              show: true,
              formatter: function (e) {
                return `${e.data.value}家(${e.data.Proportion})`;
              },
            },
          },


          //  {
          //   name: "面积模式",
          //   type: "pie",
          //   radius:'45%',
          //   center: ['50%', '60%'],
          //   data: [
          //     {
          //       value: this.data.fractionOne,
          //       Proportion: this.data.percentageOne,
          //       name: "90-100",
          //     },
          //     {
          //       value: this.data.fractionTwo,
          //       Proportion: this.data.percentageTwo,
          //       name: "80-89",
          //     },
          //     {
          //       value: this.data.fractionThree,
          //       Proportion: this.data.percentageThree,
          //       name: "70-79",
          //     },
          //     {
          //       value: this.data.fractionFour,
          //       Proportion: this.data.percentageFour,
          //       name: "60-69",
          //     },
          //     {
          //       value: this.data.fractionFive,
          //       Proportion: this.data.percentageFive,
          //       name: "0-59",
          //     },
          //   ],
          //   hoverAnimation: false,
          //   label: {
          //     color: "#fff",
          //     show: false,
          //     formatter: function (e) {
          //       return `${e.data.value}家(${e.data.Proportion})`;
          //     },
          //   },
          // },
          //        {
          //   name: 'Nightingale Chart',
          //   type: 'pie',
          //   radius: [50, 250],
          //   center: ['50%', '50%'],
          //   roseType: 'area',
          //   itemStyle: {
          //     borderRadius: 8
          //   },
          //   data: [
          //     { value: 40, name: 'rose 1' },
          //     { value: 38, name: 'rose 2' },
          //     { value: 32, name: 'rose 3' },
          //     { value: 30, name: 'rose 4' },
          //     { value: 28, name: 'rose 5' },
          //     { value: 26, name: 'rose 6' },
          //     { value: 22, name: 'rose 7' },
          //     { value: 18, name: 'rose 8' }
          //   ]
          // }
        ],
      };
      echarts.init(document.getElementById("main2"), "dark").setOption(option);
    },
    findIsSpecialFoodTotals() {
      return this.$http.findIsSpecialFoodTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.isSpecialFood = res.data;
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },

    findBodyIndustryTotals() {
      return this.$http.findBodyIndustryTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     // this.list=res.data
      //     this.indexList = res.data;
      //     // this.column();
      //     this.columnLeft();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    findCodeTotals() {
      return this.$http.findCodeTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.list = res.data;
      //     this.column();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    setcard() {
      var option = {
        title: {
          top: 12,
          text: "各年龄段分布",
          //  subtext: '各区注册单位数',
          left: "center",
          textStyle: {
            fontSize: 16,
            color: "#ffffff",
          },
        },
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "18%",
          data: ["男", "女"],
          textStyle: {
            color: "white",
          },
        },
        calculable: true,
        xAxis: [
          {
            name: "年龄",
            axisLine: {
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            type: "category",
            data: ["16-35", "36-45", "46-60", "60+"],

            // splitLine: {
            //   show: false,
            // },
          },
        ],
        grid: {
          left: "20%",
          bottom: "8%",
          top: "35%",
        },
        yAxis: [
          {
            type: "value",
            name: "人数",
            // interval: 10000,
            axisLabel: {
              // textStyle: {
              //   color: "white", //坐标的字体颜色
              // },
              formatter: "{value} ",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "男",
            type: "bar",
            data: [
              this.data.man1635,
              this.data.man3545,
              this.data.man4560,
              this.data.manOver60,
            ],
            barWidth: 15,
            color: ["#437EB8"],
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
          {
            name: "女",
            type: "bar",

            data: [
              this.data.woman1635,
              this.data.woman3545,
              this.data.woman4560,
              this.data.womanOver60,
            ],
            barWidth: 15,
            color: ["#EA4A97"],
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChartleft.setOption(option);
    },
    getdata() {
      console.log(131);
    },
    query() {
      return this.$http.queryInfo({ code: this.code });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.data = res.data;
      //     // this.setcard();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    onconfirm() {
      // this.dialogVisible = false;
    },
    showTable(e) {
      this.$router.push({
        name: "query",
        query: { code: this.code, type: e + "" },
      });
    },
    column() {
      // let option = {
      //   grid: {
      //     top: '35%',
      //   },
      //   legend: {
      //     top: '15%',
      //     data: [
      //       '餐饮服务经营者',
      //       '食品流通经营者',
      //       '食品生产经营者',
      //       '食品销售经营者',
      //       '单位食堂',
      //     ],
      //     textStyle: {
      //       color: 'white',
      //     },
      //   },
      //   title: {
      //     top: 13,
      //     text: '各区域单位业态分析',
      //     //  subtext: '各区注册单位数',
      //     left: 'center',
      //     textStyle: {
      //       fontSize: 16,
      //       color: '#ffffff',
      //       height: 50,
      //     },
      //   },
      //   calculable: true,
      //   backgroundColor: 'rgba(32,72,136,.1)',
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow',
      //     },
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: this.list.map(x => x.areaName),
      //     // data: [],
      //     axisTick: { show: false },
      //     axisLine: {
      //       lineStyle: {
      //         color: '#FFF',
      //         type: 'solid', // solid、dashed、dotted
      //       },
      //     },
      //     axisLabel: {
      //       color: '#fff',
      //       fontSize: '12',
      //       interval: 0,
      //       rotate: 40,
      //     },
      //     nameRotate: 90,
      //   },
      //   yAxis: [
      //     {

      //       axisTick: { show: false },
      //       nameGap: 10,
      //       nameTextStyle: {
      //         color: '#FFF',
      //         fontSize: 14,
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           color: "white",
      //           type: 'dashed',
      //           opacity: '0.25',
      //         },
      //       },
      //     },
      //     {
      //       axisTick: { show: false },
      //       splitLine: {
      //         lineStyle: {
      //           color: '#FFF',
      //           type: 'dashed',
      //         },
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           color: '#FFF',
      //           type: 'dashed',
      //         },
      //       },
      //     },
      //   ],
      //   series: [...[
      //     {
      //       key: 'cateringBusinessTotal',
      //       value: '餐饮服务经营者',
      //     },
      //     {
      //       key: 'circulationTotal',
      //       value: '食品流通经营者',
      //     },
      //     {
      //       key: 'foodProductionTotal',
      //       value: '食品生产经营者',
      //     },
      //     {
      //       key: 'foodSalesTotal',
      //       value: '食品销售经营者',
      //     },
      //     {
      //       key: 'unitCanteenTotal',
      //       value: '单位食堂',
      //     },
      //   ].map((x, index) => {
      //     let list = {
      //       name: x.value,
      //       type: 'bar',
      //       data: [],
      //       stack: '1',
      //       barWidth: 15,
      //       label: {
      //         show: true,
      //         position: 'top',
      //         color: '#fff',
      //         formatter: param => {
      //           if (param.componentIndex == 4) {
      //             for (let index = 0; index < this.list.length; index++) {
      //               return this.$_.values(
      //                 this.list[param.dataIndex].superBodyindustryResponse
      //               ).reduce((acc, cur) => {
      //                 return acc + cur;
      //               });
      //             }
      //           }
      //           return '';
      //         },
      //       },
      //     };
      //     list.data = this.list.map(z => z.superBodyindustryResponse[x.key]);
      //     return list;
      //   }),

      //   ]
      // };

      //           let	option = {
      // 	color: ['#008000', '#ffd700', '#ff0000'],
      // 	backgroundColor:'rgba(32,72,136,.1)',
      // 	// backgroundColor:"#00ff00",
      // 	tooltip: {
      // 		triggerOn: 'click'
      // 	},
      // 	radar: {
      // 		name: {
      // 			show: false
      // 		},
      // 		indicator: [{
      // 				name: 'A',
      // 				max:100
      // 			},
      // 			{
      // 				name: 'B',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'C',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'D',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'E',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'F',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'G',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'H',
      // 				max: 100
      // 			}
      // 		],
      // 		center: ['50%', '20%'],
      // 		radius: '100%',
      // 		axisLine: {
      // 			show: false
      // 		},
      // 		splitLine: {
      // 			show: false
      // 		},
      // 		splitArea: {
      // 			show: false
      // 		}
      // 	},
      // 	series: [{
      // 		type: 'radar',
      // 		areaStyle: {
      // 			opacity: 1,
      // 			shadowBlur: 1,
      // 			shadowColor: 'rgba(0,0,0,.5)',
      // 		},
      // 		emphasis: {
      // 			areaStyle: {
      // 				opacity: 0
      // 			}
      // 		},
      // 		silent: true,
      // 		data: [{
      // 				value: [0, 0, 0, 100, 100, 99, 0, 0],
      // 				name: '湖南',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      //              color:"#fff",
      // 					show: true,
      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 99)
      // 							return "—— 5." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}

      // 			},
      // 			{
      // 				value: [0, 0, 0, 66, 66, 67, 0, 0],
      // 				name: '安徽',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      // 					show: true,
      //              color:"#fff",

      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 67)
      // 							return "——1." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}
      // 			},
      // 			{
      // 				value: [0, 0, 0, 33, 33, 35, 0, 0],
      // 				name: '北京',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      // 					show: true,
      //              color:"#fff",

      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 35)
      // 							return "—— 3." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}
      // 			},
      // 			// {
      // 			// 	value: [0, 0, 0, 39, 40, 40, 0, 0],
      // 			// 	name: '江苏',
      // 			// 	symbol: 'circle',
      // 			// 	symbolSize: 1,
      // 			// 	label: {
      // 			// 		show: true,
      // 			// 		position: [-55, -10],
      // 			// 		formatter: function(point) {
      // 			// 			if(point.value == 39)
      // 			// 				return "2." + point.name + " ——"
      // 			// 			else
      // 			// 				return ''
      // 			// 		},
      // 			// 	}
      // 			// },
      // 			// {
      // 			// 	value: [0, 0, 0, 20, 20, 19, 0, 0],
      // 			// 	name: '上海',
      // 			// 	symbol: 'circle',
      // 			// 	symbolSize: 1,
      // 			// 	label: {
      // 			// 		show: true,
      // 			// 		position: [-5, -10],
      // 			// 		formatter: function(point) {
      // 			// 			if(point.value == 19)
      // 			// 				return "—— 1." + point.name
      // 			// 			else
      // 			// 				return ''
      // 			// 		},
      // 			// 	}
      // 			// }
      // 		]
      // 	}],
      // 	itemStyle: {
      // 		emphasis: {
      // 			show: false,
      // 			shadowBlur: 10,
      // 			shadowOffsetX: 0,
      // 			shadowColor: 'rgba(0, 0, 0, 0.5)'
      // 		}
      // 	}
      // };
      let option = {
        backgroundColor: "rgba(32,72,136,.2)",
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c}%",
          formatter: function (e) {
            return `${e.data.name}分共有${e.data.tip}家,占${e.data.Proportion}`;
          },
        },
        legend: {
          left: "25%",
          top: 10,
          data: ["80+", "60-79", "0-59"],
          textStyle: {
            color: "white",
          },
        },
        color: ["#008000", "#ffd700", "#ff0000"],
        series: [
          {
            name: "金字塔",
            type: "funnel",
            width: "70%",
            height: "70%",
            left: "1%",
            top: "25%",
            sort: "ascending",
            data: [
              {
                tip: this.list.fractionOne,
                Proportion: this.list.percentageOne,
                value: 100,
                name: "80+",
              },
              {
                tip: this.list.fractionTwo,
                Proportion: this.list.percentageTwo,
                value: 66,
                name: "60-79",
              },
              {
                tip: this.list.fractionThree,
                Proportion: this.list.percentageThree,
                value: 33,
                name: "0-59",
              },
            ],
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true, //隐藏文字
            //     },
            //     labelLine: {
            //       show: true, //隐藏指示线
            //     },
            //     borderWidth: 3, // 间距的宽度
            //     borderColor: "#0D1d50", //背景色

            //     opacity: 0.8,
            //   },
            // },
            label: {
              color: "#fff",
              show: true,
              formatter: function (e) {
                return `${e.data.tip}家(${e.data.Proportion})`;
              },
            },
            itemStyle: {
              borderColor: "#0D1d50",
              borderWidth: 4,
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChartleft.setOption(option);
    },
    columnLeft() {
      var option = {
        // title: {
        //   top: 12,
        //   text: '单位业态食安指数分析',
        //   //  subtext: '各区注册单位数',
        //   left: 'center',
        //   textStyle: {
        //     fontSize: 16,
        //     color: '#ffffff',
        //   },
        // },
        backgroundColor: "rgba(32,72,136,.1)",
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow',
        //   },
        // },
        // legend: {
        //   top: '15%',
        //   data: [
        //     '餐饮服务经营者',
        //     '食品流通经营者',
        //     '食品生产经营者',
        //     '食品销售经营者',
        //     '单位食堂',
        //   ],
        //   textStyle: {
        //     color: 'white',
        //   },
        // },
        legend: {
          left: "25%",
          top: 10,
          data: ["最高", "平均", "最低"],
          textStyle: {
            color: "white",
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: "{a} <br/>{b} : {c}%",
          formatter: function (e) {
            return `${e[0].axisValue} <br/>最高${e[0].data}<br/>平均${e[1].data}<br/>最低${e[2].data}`;
          },
          axisPointer: {
            type: "shadow",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        calculable: true,
        xAxis: [
          {
            name: "单位业态",
            axisLine: {
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            axisLabel: {
              rotate: "45",
              fontSize: "12",
            },
            type: "category",
            data: ["食品生产", "餐饮服务", "集中用餐单位食堂", "食品流通"],
            // nameRotate:"45"
          },
        ],
        grid: {
          left: "15%",
          bottom: "25%",
          top: "25%",
          right: "20%",
        },
        yAxis: [
          {
            type: "value",
            name: "食安指数",
            // interval: 10000,
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          // {
          //   name: '餐饮服务经营者',
          //   type: 'bar',
          //   //  key:'cateringBusinessTotal',
          //   //       //  value: "餐饮经营者"
          //   //       // },
          //   //       //    {
          //   //       //  key:'circulationTotal',
          //   //       //  value: "食品流通经营者"
          //   //       // },   {
          //   //       //  key:'foodProductionTotal',
          //   //       //  value: "食品生产经营者"
          //   //       // },   {
          //   //       //  key:'foodSalesTotal',
          //   //       //  value: "食品销售经营者"
          //   //       // },   {
          //   //       //  key:'unitCanteenTotal',
          //   //       //  value: "单位食堂经营者"
          //   data: [
          //     this.indexList.man0079['cateringBusinessTotal'],
          //     this.indexList.man7990['cateringBusinessTotal'],
          //     this.indexList.man9000['cateringBusinessTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品流通经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['circulationTotal'],
          //     this.indexList.man7990['circulationTotal'],
          //     this.indexList.man9000['circulationTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品生产经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['foodProductionTotal'],
          //     this.indexList.man7990['foodProductionTotal'],
          //     this.indexList.man9000['foodProductionTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品销售经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['foodSalesTotal'],
          //     this.indexList.man7990['foodSalesTotal'],
          //     this.indexList.man9000['foodSalesTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },
          // {
          //   name: '单位食堂',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['unitCanteenTotal'],
          //     this.indexList.man7990['unitCanteenTotal'],
          //     this.indexList.man9000['unitCanteenTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },
          {
            name: "最高",
            data: [
              this.indexList[2].max,
              this.indexList[3].max,
              this.indexList[0].max,
              this.indexList[1].max,
            ],
            type: "line",
            areaStyle: {
              opacity: 0.1,
            },
            // itemStyle: {
            //   normal: {
            //     color: "#4adefe",
            //   },
            // },
          },
          {
            name: "平均",
            areaStyle: {
              opacity: 0.1,
            },
            data: [
              this.indexList[2].avg,
              this.indexList[3].avg,
              this.indexList[0].avg,
              this.indexList[1].avg,
            ],
            type: "line",
            // itemStyle: {
            //   normal: {
            //     color: "#00ff00",
            //   },
            // },
          },
          {
            name: "最低",
            areaStyle: {
              opacity: 0.1,
            },
            data: [
              this.indexList[2].min,
              this.indexList[3].min,
              this.indexList[0].min,
              this.indexList[1].min,
            ],
            type: "line",
            // itemStyle: {
            //   normal: {
            //     color: "#00ff00",
            //   },
            // },
          },
        ],
      };
      this.myChartleftColumn.setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // dialogs,
    // "query-dialog": () => import("@/views/monitoring/components/query"),
  },
  // 计算属性
  computed: {
    opened: () => store.state.app.sidebar.opened,
  },
};
</script>

<style lang="less" scoped>
// .container {
//   height: 100%;
//   .top {
//     padding-top: 10px;
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-evenly;
//     .item {
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//       align-items: center;
//       height: 100px;
//       // width: 100px;
//       flex: 1;
//       // max-width: 130px;
//       cursor: pointer;
//       .iten_son {
//         display: flex;
//         align-items: top;
//         text-align: center;
//         justify-content: center;
//         // height: 100%;
//         width: 70px;
//         // flex: 1;
//         // width: 100%;
//         min-height: 70px;
//         color: #4adefe;
//         border-radius: 50%;
//         // border: 5px  solid #62BCE1;
//       }
//     }
//   }

//   //  .top {
//   //   padding: 10px 0;
//   //   display: flex;
//   //   flex-wrap: wrap;
//   //   justify-content: space-evenly;
//   //   .item {
//   //     height: 100px;
//   //     flex: 1;
//   //     // width: 100px;
//   //     padding: 10px;
//   //     .iten_son {
//   //       display: flex;
//   //       align-items: center;
//   //       text-align: center;
//   //       flex-direction: column;
//   //       justify-content: center;
//   //       height: 100%;
//   //       color: #4adefe;
//   //       font-size: 12px;
//   //       border-radius: 50%;
//   //       // border: 5px  solid #62BCE1;
//   //     }
//   //   }
//   // }
//   .left {
//     width: 100%;
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-evenly;
//     .item {
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//       align-items: center;
//       height: 100px;
//       //  width: 100px;
//       // max-width: 130px;
//       flex: 1;
//       cursor: pointer;
//       .iten_son {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         // flex: 1;
//         min-height: 90px;
//         min-width: 90px;
//         color: #4adefe;
//         border-radius: 50%;
//         // border: 5px  solid #62BCE1;
//       }
//     }
//   }

//   .personnelcolor {
//     color: #ffffff;
//     text-align: center;
//     height: 30px;
//     line-height: 30px;
//   }
//   .personnelNumber {
//     color: #4adefe;
//     text-align: center;
//     font-size: 20px;
//     height: 30px;
//     line-height: 30px;
//   }
//   .Formatcolor {
//     color: #6ee8df;
//     height: 30px;
//     line-height: 30px;
//     text-align: center;
//   }
//   .Format {
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-between;
//     padding: 10px;
//     background-color: rgba(32, 72, 136, 0.1);
//     // 下面的代码注释了
//     // .item {
//     //   width: 48%;
//     //   border-radius: 5px;
//     //   // flex:1;
//     //   padding: 10px;
//     //   border: 1px solid #0660ba;
//     //   color:#01C8E7;
//     //   .iten_son_header {
//     //     display: flex;
//     //     padding-bottom: 10px;
//     //     border-bottom: 1px solid #08c7f1;
//     //     .left {
//     //       width: 70px;
//     //       height: 70px;
//     //       border-radius: 50%;
//     //       border: 2px solid #0571be;
//     //       img {
//     //         width: 30px;
//     //         height: 30px;
//     //       }
//     //       > div {
//     //         font-size: 12px;
//     //         text-align: center;
//     //         color: #00e2fb;
//     //       }
//     //     }
//     //     .right {
//     //       // display: flex;
//     //       // justify-content: center;
//     //       // align-items: center;
//     //       flex: 1;
//     //       display: flex;

//     //       flex-direction: column;
//     //       justify-content: space-evenly;

//     //       > div {
//     //         text-align: center;
//     //       }
//     //     }
//     //   }
//     //   .iten_son_body {
//     //     display: flex;
//     //     margin-top: 10px;

//     //     .left_item {
//     //       flex: 1;
//     //       display: flex;
//     //       justify-content: space-between;
//     //       .title{
//     //         font-size: 14px;
//     //       }
//     //     }
//     //   }
//     // }
//     // .item:nth-child(1) {
//     //   margin-bottom: 10px;
//     // }
//     // .item:nth-child(2) {
//     //   margin-bottom: 10px;
//     // }
//   }
//   .isfood_wapper {
//     display: flex;
//     justify-content: center;
//     padding: 10px 0;
//     .isfood {
//       color: yellow;
//       text-align: center;
//       background: url("../../../../assets/images/isFood.png");
//       //  backgroundRepeat: "no-repeat",
//       //     backgroundSize: "100% 100%",
//       background-repeat: no-repeat;
//       background-size: "100% 100%";
//       width: 150px;
//       background-position: center;
//       cursor: pointer;
//     }
//   }
//   .title {
//     width: 40%;
//     text-align: left;
//     color: #ffffff;
//     padding: 8px 35px;
//   }
// }
.container {
 
  height: 100%;
  color: #ffffff;
    font-size: 12px;
  .dv-border-box-1 {
    height: auto;
    .content {
      padding:30px 20px;

      .list {
        display: flex;
        justify-content: space-around;
        .item {
          flex-basis: 100px;
          height: 90px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          div {
            text-align: center;
            font-weight: 700;
          }
          // cursor: pointer;
        }
        .number {
          flex-basis: 60px;
          height: 60px;
        }
      }
      .totle {
        display: flex;       
        // cursor: pointer;
        align-items: center;
      }
    }
  }
 /deep/ .unit-label{
    display: none;
  }
 /deep/  .label-column :nth-last-child(1){
    display: none;
  }











}
</style>
